How To Design Navigation Bar Using CSS For Your Website?
September 19th, 2016 | by Ravi Chahar || 10 Comments |
Are you seeking for the method to design navigation bar using CSS? You may have noticed that every website has the different navigation menu.
Do you have something in your mind about the design of the navigation menu of your website? Before that, you should know that when you use the WordPress navigation function then it shows the menu.
Do you know how to create navigation menu in WordPress theme? You can add many menus in your theme. But what would you do about the design?
In this tutorial, I will walk you through a simple process which can help you to understand the design of the menu.
You Can Design Navigation Bar Using CSS.
When you create navigation menu in WordPress then it would appear as a vertical menu. You have to create a horizontal navigation menu as shown in the theme here. You just have to use some CSS properties.
But before that, you should know what to target. After registering the navigation menus in the theme, you embed the menu in the HTML5 <nav> tag.
It would be great if you add a class to target. We would use the class and the WordPress default structure of the menu to design navigation bar using CSS.
How To Find The Elements of Navigation Menu To Design?
If you’re using Google chrome, Opera, or any other we browser then you just have to right-click on the menu items of the navigation menu and then choose “inspect element“.
It would let you know about the unordered list and the list items present in the menu. Use the class you have given and the menu elements to design it.
Let me show you the code which would let you have the clean navigation menu shown on BloggingLove Theme.
Step 1:- It would be better if you remove the margin and the padding of the unordered list. I have used “site-nav” as the HTML class to target the elements.
margin: 0px;
padding: 0px;
}
Step 2:- The default navigation menu would contain the list items and the bullets would be there. To remove those bullets, you have to target the list-items.
list-style-type: none;
}
Step 3:- You would see the vertical navigation menu. And if you want to create a horizontal menu then you have to float the list items.
margin-right: 0px;
float: left;
}
Step 4:- After floating the elements, it’s important to clear the floats and manage their appearance.
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1;}
Step 5:- After that, you have to target the <ul> to give a proper shape to the navigation menu. I have aded some space below the menu using the margin property.
The font-family and the font-size if provided to the text of the menu. Make sure that if you want to increase the space below and above the text in the menu items then it would be great to use the “line-height” instead of padding.
margin-bottom: 12px;
color: #2b2727;
border-top: 1px solid #161515;
border-bottom: 1px solid #443737;
font-family: Raleway, sans-serif;
font-size: 14px;
line-height: 32px;
}
Step 6:- Now is the time to target the links shown on the menu. To design navigation bar using CSS, you have to look upon the links.
I haven’t chosen any background color for the menu or the links. You can use it. It’s important to display the menu links as the block elements.
.site-header nav ul li a:visited {
display: block;
padding: 10px 18px;
border-bottom: none;
text-decoration: none;
color: #2b2727;
text-transform: uppercase;
}
Step 7:- The final step is to choose the hover effect. When someone take the cursor on the menu links then what should be the look.
You can use the background color, text color can be changed. I have just added the text color here. You can design the links according to the color combination of your website.
color: #f18902;
}
Your target to design navigation bar using CSS has been completed and now you can check it on your website. There are many design ideas which can be used to design an amazing and attractive navigation menu.
Can You Now Design Navigation Bar Using CSS?
You don’t need to use any other language. While developing a WordPress theme, you should use the latest format of HTML.
But when we talk about the design then if possible then make sure that you don’t complicate the code. The navigation menu would look great if you use the background color for the hover effect.
Use the color according to the rest of the theme. Navigation menu is one of the most important parts of your website and you should design it clean and elegant.
If you still face any problem and feel free to ask.
Related Posts
10 comments
Leave a Reply
Hi Ravi Bro,
Thanks for this wonderful tutorial on CSS codes for navigation design. I am currently using Genesis theme, but I have some problem on CSS navigation. I think there are two CSS codes. As you can see, when I open my site, first it is loading with blue and then becomes gray… In a mobile platform, it is remaining as blue only…
I tried so fix it out, but could not. I tried to find on style sheet also, but no help. I think you will be the best person to ask…. What is the problem?
(Note: No custom CSS)
Hope this is the right platform to ask…. Thanks a lot.
Hey Ugyen,
There is nothing wrong with the navigation menu. Actually when you design the menu for the mobile platforms, then @media is used. And it is possible that the developer has added that color in that CSS property.
And the blueish color appears in the starting is because you have changed the background color from the default color. CSS would pick up the code which is updated at last.
Though it won’t affect the design of your website because the same blueish color is used for the hover effect for mobiles.
~Ravi
Hello Ravi,
Thank you very much. I was worried that it might affect my page load. You made my doubt clear…
Have a nice day bro….
Hey Ugyen,
It won’t affect the page loading time. It’s just the CSS used to design the navigation menu. In many themes, the background color of the navigation menu is different from the unordered list of its items.
There is nothing to worry about.
Happy to help.
~Ravi
Nice one, Ravi.
I always love to check out this kind of posts that have something practically done.
keep it up bro.
Have a great time.
Hey Atish,
I am glad to know that you found it helpful.
Web designing can be done properly only if we know CSS. There are many portions of the website which can be redesigned.
Thanks for stopping by.
Have a great day.
~Ravi
Hey Ravi,
The HTML menu bar design has seen an increase in usage with rise in popularity of minimalist website design. More people are choosing simpler bar menu navigation over the more complex drop down navigation. This style of design provides the end user a simplified interface, free from clutter and distraction.
If your website doesn’t have a lot of pages, a bar menu like these will work perfectly and keep your users focused on the page content. Most menu bar navigation have 1 level and a larger font size. Since these type of navigation are optimized for smaller websites, the designs can be much bigger and more extravagant. Once again thank for this informative brilliant post.
With best wishes,
Amar kumar
Hey Amar,
While adding the navigation menu in the WordPress theme, you don’t need to use the HTML. Just use the WordPress functions and the HTML will get generated automatically.
You just have to design the menu. I agree with your point that nowadays people are focusing on the design of the navigation menu. They try to optimize it according to their websites.
Appreciate the comment and the share.
Enjoy the week.
~Ravi
Hello Sir,
Could you please explain this code much better? What is the use of this code for navigation menu?
Step 4:- After floating the elements, it’s important to clear the floats and manage their appearance.
.site-nav ul:before, .site-nav ul:after { content: “”; display: table;}
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1;}
Hey Harry,
When you first add a navigation menu, you will see them in a vertical position. To make them appear in a horizontal direction, you may float them. And if you don’t use clearfix or clear, the layout below navigation menu will get messed up. To make it separate, it’s important to clear those floats used for the unordered list of the menu items.
I hope you got it.